/*!
 * BEGIN HEADER
 *
 * Contains:        Bielefeld Theme CSS
 * CVM-Role:        Theme
 * Maintainer:      Hendrik Erz
 * License:         GNU GPL v3
 *
 * Description:     This file contains all CSS directives to colour up the app.
 *                  No actual geometry is done here, only the colouring. It
 *                  includes both a light and a dark main less file, which then
 *                  subsequently include everything else.
 *
 * END HEADER
 */

// First import the Berlin theme, because this mainly changes colours.
@import "../theme-berlin/theme-main.less";

:root {
  // Now adapt
  --c-primary: var(--orange-0);
  --c-primary-shade: var(--orange-1);

  --c-secondary: var(--green-0);
  --c-secondary-shade: var(--green-1);

  --bg-primary: white;

  // Colours for the directory list

  --c-project: var(--orange-2);

  // Scrollbar annotations
  --bg-annotation: var(--orange-2);
  --bg-annotation-dark: yellow;

  --selection-light: var(--beige-2);
  --selection-dark: var(--grey-6);

  /**
   * ALERTS
   */
  --c-alert-success: var(--green-selection);
  --c-alert-success-shade: var(--green-selection-dark);

  --c-alert-warning: var(--gold-selection);
  --c-alert-warning-shade: var(--gold-selection-dark);

  --c-alert-error: var(--bg-error);
  --c-alert-error-shade: var(--fg-error);

  /**
   * POMODORO
   */
  --pomodoro-task: var(--orange-2);
  --pomodoro-short: var(--gold-selection-dark);
  --pomodoro-long: var(--green-selection-dark);

  // Necessary for the heatmap colours, 29 corresponds to @orange-0
  --search-hue: 29;
}

/**
 * ADDITIONAL STUFF
 */

 @c-primary: @orange-0;
 @c-primary-shade: @orange-1;

body {
  #editor .CodeMirror {
    // We only need to change the editor's font
    font-family: @font-liberation;
  }

  #editor {
    // In light mode, use a beige background colour
    background-color: var(--beige-0);
  }

  #file-tree { background-color: var(--beige-1); }
  #file-list {
    background-color: var(--beige-1);
    div.directory {
      color: var(--orange-1);
    }
  }

  #file-manager #file-manager-resize { background-color: var(--beige-0); }
}

// Exchange the colour of the preview image in the display settings to accomodate
// for the primary colour of this theme.
.modal .dialog div.image-size .image {
  filter: hue-rotate(230deg) saturate(100%) contrast(100%) brightness(119%);
}
